<template>
	<view class="fight-group-detail" v-if="!loadding">
		<!--产品-->
		<view class="product-info p30 d-s-c bg-white">
			<view class="product-cover"><image lazy-load :src="productData.product.image[0].file_path" mode="aspectFit"></image></view>
			<view class="info flex-1 ml30 f30">
				<text>{{ productData.product.product_name }}</text>
				<view class="mt20">
					<text>{{ productData.assemble_num }}人团：</text>
					<text class="ml30 red">￥</text>
					<text class="fb red f34">{{ productData.assembleSku[0].assemble_price }}</text>
				</view>
			</view>
		</view>

		<!--拼团人-->
		<view class="fight-users mt20 bg-white">
			<!--成员列表-->
			<view class="user-list d-c-c">
				<view class="user-box pr" v-for="(item, index) in billData.billUser" :key="index">
					<text class="leader" v-if="index == 0">团长</text>
					<image lazy-load :src="item.user.avatarUrl" mode="aspectFit"></image>
				</view>
				<view class="user-box user-who d-c-c">?</view>
			</view>
			<view class="d-c-c mt30 gray3">
				还差
				<text class="fb">{{ dif_people }}</text>
				人成团
			</view>
			<view class="mt20 d-c-c gray6 f34"><Countdown :config="countdownConfig" @returnVal="returnValFunc"></Countdown></view>
		</view>

		<view class="leader-info d-b-c p30">
			<view class="photo d-s-c">
				<image lazy-load :src="billData.user.avatarUrl" mode="aspectFit"></image>
				<text class="ml20">{{ billData.user.nickName }}</text>
			</view>
			<view class="gray9">
				<text>{{ billData.create_time }}</text>
				<text class="ml10">开团</text>
			</view>
		</view>

		<!--底部按钮-->
		<view class="fight-group-btns">
			<button v-if="!reallyAssemble" type="default" class="btn-red" @click="gotoAssemble(billData)">去拼团</button>
			<button v-else type="default" class="btn-red" open-type="share" @click="shareFunc">分享拼团</button>
		</view>

		<!--分享-->
		<share :isMpShare="isMpShare" :product_id="product_id" @close="closeShare"></share>
		<!--app分享-->
		<AppShare :isAppShare="isAppShare" :appParams="appParams" @close="closeAppShare"></AppShare>
	</view>
</template>

<script>
import Countdown from '@/components/countdown/countdown.vue';
import share from '@/components/mp-share.vue';
import AppShare from '@/components/app-share.vue';
export default {
	components: {
		Countdown,
		share,
		AppShare
	},
	data() {
		return {
			/*是否正在加载*/
			loadding: true,
			/*拼团组ID*/
			assemble_bill_id: null,
			/*拼团组对象*/
			billData: {},
			/*商品对象*/
			productData: {},
			/*倒计时配置*/
			countdownConfig: {
				type: 'text',
				/*开始时间*/
				startstamp: 0,
				/*结束时间*/
				endstamp: 0
			},
			/*是否分享*/
			isMpShare: false,
			/*还差几人*/
			dif_people: 0,
			/*是否已经参团*/
			reallyAssemble: false,
			/*app分享*/
			isAppShare: false,
			appParams: {
				title: '',
				summary: '',
				path: ''
			},
			url:''
		};
	},
	onLoad(e) {
		this.assemble_bill_id = e.assemble_bill_id;
		//#ifdef H5
		if (this.isWeixin()) {
			this.url = window.location.href;
		}
		//#endif
	},
	mounted() {
		/*获取产品详情*/
		this.getData();
	},
	/*小程序分享*/
	onShareAppMessage() {
		let self = this;
		// 构建页面参数
		let params = self.getShareUrlParams({
			assemble_bill_id: self.assemble_bill_id
		});
		return {
			title: '【仅限' + self.dif_people + '个名额】，快来参与拼团吧',
			path: '/pagesPlus/assemble/fight-group-detail/fight-group-detail?' + params
		};
	},
	methods: {
		/*获取数据*/
		getData() {
			let self = this;
			uni.showLoading({
				title: '加载中'
			});
			self._get(
				'plus.assemble.bill/detail',
				{
					assemble_bill_id: self.assemble_bill_id,
					url: self.url
				},
				function(res) {
					self.billData = res.data.bill;
					self.productData = res.data.product;
					self.countdownConfig.startstamp = 0;
					self.countdownConfig.endstamp = self.billData.end_time;
					self.dif_people = self.productData.assemble_num - self.billData.billUser.length < 0 ? 0 : self.productData.assemble_num - self.billData.billUser.length;
					// 配置微信分享参数
					//#ifdef H5
					if (self.url != '') {
						let params = {
							assemble_bill_id: self.assemble_bill_id
						};
						self.configWx(res.data.share.signPackage, res.data.share.shareParams, params);
					}
					//#endif
					console.log(self.billData.billUser);
					self.reallyAssemble = self.hasAssemble(self.billData.billUser);

					self.loadding = false;
					uni.hideLoading();
				}
			);
		},

		/*查看是否已经拼团*/
		hasAssemble(list) {
			let flag = false;
			let user_id = this.getUserId();
			for (let i = 0; i < list.length; i++) {
				if (user_id == list[i].user_id) {
					flag = true;
					break;
				}
			}
			return flag;
		},

		/*分享*/
		shareFunc() {
			let self = this;
			//#ifndef APP-PLUS
			self.isMpShare = true;
			//#endif
			//#ifdef APP-PLUS
			self.appParams.title = '【仅限' + self.dif_people + '个名额】，快来参与拼团吧';
			self.appParams.summary = self.productData.product.product_name;
			// 构建页面参数
			let params = self.getShareUrlParams({
				assemble_bill_id: self.assemble_bill_id
			});
			self.appParams.path = '/pagesPlus/assemble/fight-group-detail/fight-group-detail?' + params;
			self.appParams.image = self.productData.product.image[0].file_path;
			self.isAppShare = true;
			//#endif
		},
		/*关闭分享*/
		closeShare() {
			this.isMpShare = false;
		},
		//关闭分享
		closeAppShare(data) {
			this.isAppShare = false;
		},
		/*返回状态*/
		returnValFunc() {},

		/*去拼团*/
		gotoAssemble(e) {
			let url = 'pagesPlus/assemble/detail/detail?assemble_product_id=' + e.assemble_product_id + '&assemble_bill_id=' + e.assemble_bill_id;
			this.gotoPage(url);
		}
	}
};
</script>

<style>
.fight-group-detail {
	padding-bottom: 100rpx;
}
.fight-group-detail .product-cover image {
	width: 200rpx;
	height: 200rpx;
}
.fight-group-detail .fight-users .user-box {
	width: 80rpx;
	height: 80rpx;
	margin: 10rpx;
	border-radius: 50%;
	border: 1px dashed #cccccc;
}
.fight-group-detail .fight-users {
	padding: 30rpx;
}
.fight-group-detail .fight-users .user-box image {
	width: 80rpx;
	height: 80rpx;
	border-radius: 50%;
}
.fight-group-detail .fight-users .user-box .leader {
	position: absolute;
	top: -20rpx;
	left: 50%;
	margin-left: -30rpx;
	width: 60rpx;
	height: 30rpx;
	line-height: 30rpx;
	text-align: center;
	color: #ffffff;
	border-radius: 30rpx;
	border: 1px solid #ffffff;
	background: red;
}
.fight-group-detail .fight-users .user-box.user-who {
	font-size: 50rpx;
	color: #999999;
}
.fight-group-detail .leader-info .photo image {
	width: 60rpx;
	height: 60rpx;
	border-radius: 50%;
}
.fight-group-btns {
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	padding: 0 30rpx;
	box-sizing: border-box;
}
.fight-group-btns button.btn-red {
	margin-bottom: 20rpx;
	height: 80rpx;
	line-height: 80rpx;
	border-radius: 40rpx;
}
</style>
